<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<base href="<%= basePath%>">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="jquery/bs_typeahead.js"></script>
</head>
<script type="text/javascript">
	$(function () {
       $("#create-searchBtn").click(function () {
         $("#findMarketActivity").modal("show");
         $("#create-activityBody").html("");
         $("#create-searchName").val("");
	   });

       $("#create-searchName").keyup(function () {
		   var name = this.value;
		   $.ajax({
			   url:'workbench/transaction/save/selectActivityByName.do',
			   data:{
			   	name:name
			   },
			   dataType:'json',
			   type:'get',
			   success:function (data) {
				   var html = "";
				   $.each(data,function (index,obj) {
					   html +=	'<tr>'
					   html +=		'<td><input activityName="'+obj.name+'" value="'+obj.id+'" type="radio" name="activity"/></td>'
					   html +=		'<td>'+obj.name+'</td>'
					   html +=		'<td>'+obj.startdate+'</td>'
					   html +=		'<td>'+obj.enddate+'</td>'
					   html +=		'<td>'+obj.owner+'</td>'
					   html +=	'</tr>'
				   });
				   $("#create-activityBody").html(html);
			   }
		   });
	   });

		//	给所有的单选按钮添加点击事件
		$("#create-activityBody").on("click","input[type='radio']",function () {
			var id = this.value;
			var activityName = $(this).attr("activityName");
			$("#create-activityName").val(activityName);
			$("#create-activityId").val(id);
			$("#findMarketActivity").modal("hide");
		});

		$("#create-searchContactsBtn").click(function () {
			$("#findContacts").modal("show");
			$("#create-contactsBody").html("");
			$("#create-searchContactsName").val("");
		});

		$("#create-searchContactsName").keyup(function () {
			var name = this.value;
			$.ajax({
				url:'workbench/transaction/sace/selectContactsByName.do',
				data:{
					fullname:name
				},
				dataType:'json',
				type:'get',
				success:function (data) {
					var html = "";
					$.each(data,function (index,obj) {
						html +=	'<tr>'
						html +=		'<td><input contactsName="'+obj.fullname+'" value="'+obj.id+'" type="radio" name="contacts"/></td>'
						html +=		'<td>'+obj.fullname+'</td>'
						html +=		'<td>'+obj.email+'</td>'
						html +=		'<td>'+obj.mphone+'</td>'
						html +=	'</tr>'
					});
					$("#create-contactsBody").html(html);
				}
			});
		});
		//	给所有的单选按钮添加点击事件
		$("#create-contactsBody").on("click","input[type='radio']",function () {
			var id = this.value;
			var contactsName = $(this).attr("contactsName");
			$("#create-contactsName").val(contactsName);
			$("#create-contactsId").val(id);
			$("#findContacts").modal("hide");
		});
	//workbench/transaction/save/insertTran.do
	//	给保存按钮添加点击事件
		$("#saveBtn").click(function () {
			var owner = $("#save-owner").val();
			var money = $("#create-amountOfMoney").val();
			var name = $("#create-transactionName").val();
			var expectedDate = $("#create-expectedClosingDate").val();
			var customerId = $("#save-customerName").val();
			var stage = $("#save-stage").val();
			var type = $("#save-transactionType").val();
			var source = $("#save-source").val();
			var activityId = $("#create-activityId").val();
			var contactsId = $("#create-contactsId").val();
			var description = $("#create-describe").val();
			var contactSummary = $("#create-contactSummary").val();
			var nextContactTime = $("#create-nextContactTime").val();
			var possibility = $("#create-possibility").val();
			if (name==null||name==""){
				alert("名称不能为空");
				return;
			}
			if (expectedDate==null||expectedDate==""){
				alert("预计成交日期不能为空");
				return;
			}
			if (customerId==null||customerId==""){
				alert("客户名称不能为空");
				return;
			}
			if (stage==null||stage==""){
				alert("阶段不能为空");
				return;
			}
			$.ajax({
				url:'workbench/transaction/save/insertTran.do',
				data:{
					owner:owner,
					money:money,
					name:name,
					expectedDate:expectedDate,
					customerId:customerId,
					stage:stage,
					type:type,
					source:source,
					activityId:activityId,
					contactsId:contactsId,
					description:description,
					contactSummary:contactSummary,
					nextContactTime:nextContactTime,
					possibility:possibility
				},
				dataType:'json',
				type:'post',
				success:function (data) {
					if(data.code=="1"){
						window.location.href = 'workbench/transaction/index.do';
					}else {
						alert("保存失败！");
						return;
					}
				}
			});
		});

	//	给阶段下拉框添加change时间
		$("#save-stage").change(function () {
			var stageValue = $(this).find("option:selected").text();
			if (stageValue==""){
				$("#create-possibility").val("");
				return;
			}
			$.ajax({
				url:'workbench/transaction/save/getPossibilityByStage.do',
				data:{
					stageValue:stageValue
				},
				dataType:'json',
				type:'post',
				success:function (data) {
					$("#create-possibility").val(data+"%");
				}
			});
		});

		//自动补全
		$("#save-customerName").typeahead({
			source:function (jquery,process) {
				var customerName = $("#save-customerName").val();
				$.ajax({
                  url:'workbench/transaction/save/getCustomerNameByName.do',
					data:{
                  	name:customerName
					},
					type:'get',
					dataType:'json',
					success:function (data) {
                  	process(data);
					}
				});
			}
		})
	});
</script>
<body>

	<!-- 查找市场活动 -->	
	<div class="modal fade" id="findMarketActivity" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="create-searchName"  class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable3" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
							</tr>
						</thead>
						<tbody id="create-activityBody">
<%--							<tr>--%>
<%--								<td><input type="radio" name="activity"/></td>--%>
<%--								<td>发传单</td>--%>
<%--								<td>2020-10-10</td>--%>
<%--								<td>2020-10-20</td>--%>
<%--								<td>zhangsan</td>--%>
<%--							</tr>--%>
<%--							<tr>--%>
<%--								<td><input type="radio" name="activity"/></td>--%>
<%--								<td>发传单</td>--%>
<%--								<td>2020-10-10</td>--%>
<%--								<td>2020-10-20</td>--%>
<%--								<td>zhangsan</td>--%>
<%--							</tr>--%>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<!-- 查找联系人 -->	
	<div class="modal fade" id="findContacts" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">查找联系人</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="create-searchContactsName"  class="form-control" style="width: 300px;" placeholder="请输入联系人名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>邮箱</td>
								<td>手机</td>
							</tr>
						</thead>
						<tbody id="create-contactsBody">
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
							<tr>
								<td><input type="radio" name="activity"/></td>
								<td>李四</td>
								<td>lisi@bjpowernode.com</td>
								<td>12345678901</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
	
	<div style="position:  relative; left: 30px;">
		<h3>创建交易</h3>
	  	<div style="position: relative; top: -40px; left: 70%;">
			<button type="button" id="saveBtn" class="btn btn-primary">保存</button>
			<button type="button" class="btn btn-default">取消</button>
		</div>
		<hr style="position: relative; top: -40px;">
	</div>
	<form class="form-horizontal" role="form" style="position: relative; top: -30px;">
		<div class="form-group">
			<label for="create-transactionOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<select id="save-owner"  class="form-control" id="create-transactionOwner">
<%--				  <option>zhangsan</option>--%>
<%--				  <option>lisi</option>--%>
<%--				  <option>wangwu</option>--%>
					<c:forEach items="${userList}" var="user">
						<option value="${user.id}">${user.name}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-amountOfMoney" class="col-sm-2 control-label">金额</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-amountOfMoney">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-transactionName">
			</div>
			<label for="create-expectedClosingDate" class="col-sm-2 control-label">预计成交日期<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-expectedClosingDate">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-accountName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="save-customerName" placeholder="支持自动补全，输入客户不存在则新建">
			</div>
			<label for="create-transactionStage" class="col-sm-2 control-label">阶段<span style="font-size: 15px; color: red;">*</span></label>
			<div class="col-sm-10" style="width: 300px;">
			  <select id="save-stage" class="form-control" >
			  	<option></option>
<%--			  	<option>资质审查</option>--%>
<%--			  	<option>需求分析</option>--%>
<%--			  	<option>价值建议</option>--%>
<%--			  	<option>确定决策者</option>--%>
<%--			  	<option>提案/报价</option>--%>
<%--			  	<option>谈判/复审</option>--%>
<%--			  	<option>成交</option>--%>
<%--			  	<option>丢失的线索</option>--%>
<%--			  	<option>因竞争丢失关闭</option>--%>
                 <c:forEach items="${stageList}" var="stage">
					 <option value="${stage.id}">${stage.value}</option>
				 </c:forEach>
			  </select>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-transactionType" class="col-sm-2 control-label">类型</label>
			<div class="col-sm-10" style="width: 300px;">
				<select id="save-transactionType" class="form-control" id="create-transactionType">
				  <option></option>
<%--				  <option>已有业务</option>--%>
<%--				  <option>新业务</option>--%>
					<c:forEach items="${transactionTypeList}" var="type">
						<option value="${type.id}">${type.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-possibility" class="col-sm-2 control-label">可能性</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" readonly="readonly" class="form-control" id="create-possibility">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-clueSource" class="col-sm-2 control-label">来源</label>
			<div class="col-sm-10" style="width: 300px;">
				<select id="save-source" class="form-control" id="create-clueSource">
				  <option></option>
<%--				  <option>广告</option>--%>
<%--				  <option>推销电话</option>--%>
<%--				  <option>员工介绍</option>--%>
<%--				  <option>外部介绍</option>--%>
<%--				  <option>在线商场</option>--%>
<%--				  <option>合作伙伴</option>--%>
<%--				  <option>公开媒介</option>--%>
<%--				  <option>销售邮件</option>--%>
<%--				  <option>合作伙伴研讨会</option>--%>
<%--				  <option>内部研讨会</option>--%>
<%--				  <option>交易会</option>--%>
<%--				  <option>web下载</option>--%>
<%--				  <option>web调研</option>--%>
<%--				  <option>聊天</option>--%>
					<c:forEach items="${sourceList}" var="source">
						<option value="${source.id}">${source.value}</option>
					</c:forEach>
				</select>
			</div>
			<label for="create-activityName" class="col-sm-2 control-label">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" id="create-searchBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-activityId">
				<input type="text" class="form-control" readonly="readonly" id="create-activityName">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactsName" class="col-sm-2 control-label">联系人名称&nbsp;&nbsp;<a href="javascript:void(0);" id="create-searchContactsBtn"><span class="glyphicon glyphicon-search"></span></a></label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="hidden" id="create-contactsId">
				<input type="text" class="form-control" readonly="readonly" id="create-contactsName">
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-describe" class="col-sm-2 control-label">描述</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-describe"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
			<div class="col-sm-10" style="width: 70%;">
				<textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
			</div>
		</div>
		
		<div class="form-group">
			<label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间</label>
			<div class="col-sm-10" style="width: 300px;">
				<input type="text" class="form-control" id="create-nextContactTime">
			</div>
		</div>
		
	</form>
</body>
</html>